<template>
  <div class="admin">
    <ul>
        <li class="flex-boxs">
            <button class="bm-btn-5 normal" @click="sql('accountbook', 1, 0)">新建数据库</button>
            <p>{{ sqlMessage[0] }}</p>
        </li>
        <li class="flex-boxs bo-b">
            <button class="bm-btn-5 caution" @click="sql('accountbook', -1, 1)">删除数据库</button>
            <p>{{ sqlMessage[1] }}</p>
        </li>

        <li class="flex-boxs">
            <button class="bm-btn-5 normal" @click="table('users', 1, 0)">新建用户表</button>
            <p>{{ tableMessage[0] }}</p>
        </li>
        <li class="flex-boxs bo-b">
            <button class="bm-btn-5 caution" @click="table('users', -1, 1)">删除用户表</button>
            <p>{{ tableMessage[1] }}</p>
        </li>
        
        <li class="flex-boxs">
            <button class="bm-btn-5 normal" @click="table('types', 1, 2)">新建类型表</button>
            <p>{{ tableMessage[2] }}</p>
        </li>
        <li class="flex-boxs bo-b">
            <button class="bm-btn-5 caution" @click="table('types', -1, 3)">删除类型表</button>
            <p>{{ tableMessage[3] }}</p>
        </li>
        
        <li class="flex-boxs">
            <button class="bm-btn-5 normal" @click="table('incspes', 1, 4)">新建记录表</button>
            <p>{{ tableMessage[4] }}</p>
        </li>
        <li class="flex-boxs">
            <button class="bm-btn-5 caution" @click="table('incspes', -1, 5)">删除记录表</button>
            <p>{{ tableMessage[5] }}</p>
        </li>
    </ul>
  </div> 
</template>

<script>
import Vue from 'vue'
import { apiMysql, apiTable } from '@http'
export default {
    data () {
        return {
            sqlMessage: [null, null],
            tableMessage: [null, null, null, null, null, null]
        }
    },
    created () {
        
    },
    methods: {
        sql (name, is, index) {
            Vue.set(this.sqlMessage, index, '正在处理...')
            apiMysql (name, is)
                .then((response) => {
                    Vue.set(this.sqlMessage, index, response.data.message)
                })
                .catch((error) => {
                    Vue.set(this.sqlMessage, index, '请求失败')
                })
        },
        table (name, is, index) {
            Vue.set(this.tableMessage, index, '正在处理...')
            apiTable (name, is)
                .then((response) => {
                    Vue.set(this.tableMessage, index, response.data.message)
                })
                .catch((error) => {
                    Vue.set(this.tableMessage, index, '请求失败')
                })
        }
    }
}
</script>

<style lang="less">
@import '../assets/style/base/b-gether-var.less';
.admin{padding:@20px;
  li{padding:@10px 0;
    button{flex:0 0 @120px;}
    p{flex:1; padding-left:@10px; line-height:@40px;}
  }
}
</style>
